<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lesson 9</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 
        本节课程内容为:数据方法,计算属性和监听器
        data , methods,computed watcher
        1.data数据的使用
        2.methods的使用,此时不能使用箭头函数,因为箭头函数里面的this,是指向外层对象
        3.computed的使用和methods的区别, 建议使用computed,因为有缓存
            当计算属性依赖的内容发生变更时,才会重新执行计算
            methods方法是只要页面重新渲染,才会重新计算
        4.computed 和watcher都能实现的功能,建议使用computed 因为更加简洁
     -->
  </head>
  <body>
    <div id="root"></div>
    <script>
      // vue的生命周期函数
      const app = Vue.createApp({
          data() {
              return {
                  count: 20,
                  price: 5
              }
          },
        //   计算属性是指,当计算属性里面引用的值发生变化的时候,计算属性也会发生变化
          computed:{
            total(){
                return this.count * this.price;
            }    
          },
        //   出现异步的情况
          watch: {
            price (){
                setTimeout(() => {
                    console.log('price change');
                }, 3000);
            }
          },
          template:
          `
              <div>{{total}}</div>
          `
      });
      const vm = app.mount('#root');
    </script>
  </body>
</html>
